<template>
	<view>
		<wanl-indexed-list :dataList="dataList" @click="click" idKey="nickname" imgKey="image" placeholder="搜索银行"></wanl-indexed-list>
		<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
			<view class="content">
				<view class="title">确认银行卡类型</view>
				<view class="margin-bj">
					<view class="item" v-for="(item, key) in bankList" :key="item.id" @tap="checkBank(key)">
						<wanl-banks :bankCode="choiceBank.nickname" :bankName="choiceBank.name" :cardType="item.cardType" :image="$wanlshop.oss(choiceBank.image)"/>
						<view class="choice text-xl" v-if="choice == 1">
							<text class="wlIcon-xuanze-danxuan" v-if="index == key"></text>
							<text class="wlIcon-xuanze" v-else></text>
						</view>
					</view>
				</view>
				<view class="xieyi">
					查看 <text @tap="onDetails(common.appConfig.bank_agreement,'服务协议','singlepage')">《服务协议》</text>
				</view>
				<view class="btn" @tap="submit">确认选择</view>
				<text class="tips">将跳转银行卡添加页面，以便快速绑定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {mapState} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				index: null,
				choice: 1,
				bankList:[{cardType: 0},{cardType: 1}],
				choiceBank:{},
				dataList: []
			}
		},
		computed: {
			...mapState(['common'])
		},
		async onLoad() {
			// async loadData() {
				await uni.request({
					url: '/publics/category/lists',
					method: 'POST',
					data:{
						type:'banks'
					},
					success: res => {
						this.dataList = res.data;
					}
				});
		},
		methods: {
			click(e) {
				this.show = true;
				this.choiceBank = e;
			},
			//选择银行卡
			checkBank(key) {
				this.index = key;
			},
			submit() {
				if(this.index == null) {
					this.$wanlshop.msg('请选择银行卡类型');
				} else {
					this.show = false;
					this.$wanlshop.prePage().bankData.bankCode = this.choiceBank.nickname;
					this.$wanlshop.prePage().bankData.bankName = this.choiceBank.name;
					this.$wanlshop.prePage().bankData.cardType = this.index;
					this.$wanlshop.prePage().bankData.category_id = this.choiceBank.id;
					this.$wanlshop.prePage().bankData.image = this.choiceBank.image;
					this.$wanlshop.back(1);
				}
			}
		}
	}
</script>

<style lang="less">
.item {
	position: relative;
}
.item .choice {
	color: rgba(255, 255, 255, 0.8);
	position: absolute;
	right: 20rpx;
	top: 80rpx;
}
.content {
	margin-top: 120rpx;
	.title {
		display: inline-block;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		width: 100%;
		text-align: center;
		margin-bottom: 26rpx;
	}
	.xieyi {
		padding: 0 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		margin-top: 90rpx;
		text {
			color: #4CBD66;
		}
	}
	.btn {
		width: 690rpx;
		height: 94rpx;
		background: #4CBD66;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 94rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 46rpx;
		margin-bottom: 16rpx;
	}
	.tips {
		display: inline-block;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #888888;
		line-height: 36rpx;
		margin-bottom: 102rpx;
		width: 100%;
		text-align: center;
	}
}
</style>